---
title: 편집기 설정
description: Astro로 빌드할 수 있도록 코드 편집기를 설정하세요.
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Astro 개발자 경험을 향상시키고 새로운 기능을 잠금 해제하도록 코드 편집기를 사용자 정의하세요.

## VS Code

[VS Code](https://code.visualstudio.com/)는 Microsoft에서 개발한 웹 개발자를 위한 인기 있는 코드 편집기입니다. VS Code 엔진은 [GitHub Codespaces](https://github.com/features/codespaces) 및 [Gitpod](https://gitpod.io/)과 같은 인기 있는 브라우저 내 코드 편집기에도 사용됩니다.

Astro는 모든 코드 편집기에서 작동합니다. 하지만 VS Code는 Astro 프로젝트에 권장되는 편집기입니다. Astro 프로젝트를 위한 몇 가지 주요 기능과 개발자 경험 개선 사항을 제공하는 공식 [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 관리하고 있습니다.

- `.astro` 파일의 구문 강조 표시
- `.astro` 파일에 대한 TypeScript 타입 정보
- 코드 완성, 힌트 등을 위한 [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense)

시작하려면 오늘 [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 설치하세요.

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Astro 프로젝트에서 [TypeScript를 설정하는 방법](/ko/guides/typescript/)을 알아보세요.</ReadMore>

## Zed

[Zed](https://zed.dev/)는 속도와 대규모 프로젝트에 최적화된 고성능 멀티플레이어 코드 편집기입니다. [Astro 확장 프로그램](https://zed.dev/extensions/astro)은 `.astro` 파일의 구문 강조 표시, 코드 완성, 포맷팅, 진단 기능, 정의로 이동 등의 기능을 제공합니다.

## JetBrains IDEs

[Webstorm](https://www.jetbrains.com/webstorm/)은 2024.2 버전에서 Astro 언어 서버에 대한 지원을 추가한 JavaScript 및 TypeScript IDE입니다. 이 업데이트는 구문 강조 표시, 코드 완성 및 포맷팅과 같은 기능을 제공합니다.

[JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro)를 통해 공식 플러그인을 설치하거나 IDE의 플러그인 탭에서 "Astro"를 검색하여 설치하세요. `Settings | Languages & Frameworks | TypeScript | Astro`에서 언어 서버를 전환할 수 있습니다.

Webstorm의 Astro 지원에 대한 자세한 내용은 [공식 Webstorm Astro 문서](https://www.jetbrains.com/help/webstorm/astro.html)를 참조하세요.

## 기타 코드 편집기

우리의 놀라운 커뮤니티는 다음을 포함하여 다른 인기 있는 편집기를 위한 여러 확장을 관리합니다.

- [Open VSX의 VS Code 확장](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="공식" /></span> - [Cursor](https://cursor.com) 또는 [VSCodium](https://vscodium.com/)과 같은 편집기에서 사용 가능한 Open VSX 레지스트리의 공식 Astro VS Code 확장
- [Vim 플러그인](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="커뮤니티" /></span> - Vim 또는 Neovim에서 Astro에 대한 구문 강조 표시, 들여쓰기 및 코드 접기 지원 제공
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#astro) 및 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 플러그인 <span style="margin: 0.25em;"><Badge class="neutral-badge" text="커뮤니티" /></span> - Neovim에서 Astro에 대한 구문 강조 표시, treesitter 파싱 및 코드 완성 제공
- Emacs - Astro와 함께 작동하도록 [Emacs 및 Eglot를 구성](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="커뮤니티" /></span>하는 방법에 대한 지침을 참조하세요.
- [Sublime Text용 Astro 구문 강조 표시](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="커뮤니티" /></span> - Sublime Text 패키지 관리자에서 사용할 수 있는 Sublime Text용 Astro 패키지
- [Nova 확장](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="커뮤니티" /></span> - Nova에서 Astro에 대한 구문 강조 표시 및 코드 완성 제공

## 브라우저 내 편집기

로컬 편집기 외에도 Astro는 다음을 포함하여 브라우저에서 호스팅되는 편집기에서도 잘 실행됩니다.

- [StackBlitz](https://stackblitz.com/) 및 [CodeSandbox](https://codesandbox.io/) - `.astro` 파일에 대한 구문 강조 표시를 기본적으로 지원하는 브라우저에서 실행되는 온라인 편집기. 설치나 구성이 필요하지 않습니다!
- [GitHub.dev](https://github.dev/) - Astro VS Code 확장을 [웹 확장](https://code.visualstudio.com/api/extension-guides/web-extensions)으로 설치할 수 있으며, 이를 통해 전체 확장 기능 중 일부에만 액세스할 수 있습니다. 현재는 구문 강조 표시만 지원됩니다.
- [IDX](https://idx.dev) 및 [Gitpod](https://gitpod.io/) - Open VSX에서 공식 Astro VS Code 확장을 설치할 수 있는 클라우드의 완전한 개발 환경

## 기타 도구

### ESLint

[ESLint](https://eslint.org/)는 JavaScript 및 JSX를 위한 인기 있는 린터입니다. Astro 지원을 위해 [커뮤니티에서 관리하는 플러그인](https://github.com/ota-meshi/eslint-plugin-astro)을 설치할 수 있습니다.

프로젝트에 ESLint를 설치하고 설정하는 방법에 대한 자세한 내용은 [프로젝트의 사용자 가이드](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)를 참조하세요.

### Stylelint

[Stylelint](https://stylelint.io/)는 CSS를 위한 인기 있는 린터입니다. [커뮤니티에서 관리하는 Stylelint 구성](https://github.com/ota-meshi/stylelint-config-html)은 Astro 지원을 제공합니다.

설치 지침, 편집기 통합 및 추가 정보는 프로젝트의 README에서 찾을 수 있습니다.

### Biome

[Biome](https://biomejs.dev/)은 웹을 위한 올인원 린터 및 포맷터입니다. [Biome은 현재 `.astro` 파일을 실험적으로 지원](https://biomejs.dev/internals/language-support/#html-super-languages-support)하며, `.astro` 파일의 프런트매터를 린팅하고 포맷팅하는 데 사용할 수 있습니다.

### Prettier

[Prettier](https://prettier.io/)는 JavaScript, HTML, CSS 등을 위한 인기 있는 포맷터입니다. [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 사용하는 경우 Prettier를 사용한 코드 포맷팅이 포함됩니다.

편집기 외부 (예: CLI) 또는 편집기 도구를 지원하지 않는 편집기에서 `.astro` 파일에 대한 포맷팅을 지원하려면 [공식 Astro Prettier 플러그인](https://github.com/withastro/prettier-plugin-astro)을 설치하세요.

<Steps>
1. `prettier`와 `prettier-plugin-astro`를 설치합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. 프로젝트 루트에 `.prettierrc` 구성 파일 (또는 `.prettierrc.json`, `.prettierrc.mjs` 또는 [기타 지원되는 형식](https://prettier.io/docs/configuration))을 생성하고 `prettier-plugin-astro`를 추가합니다.

    
    이 파일에서 Astro 파일의 파서를 수동으로 지정합니다.

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

3. 프로젝트에 다른 Prettier 플러그인을 설치하여 구성 파일에 추가할 수도 있습니다. 이러한 추가 플러그인은 특정 순서로 나열해야 할 수도 있습니다. 예를 들어 Tailwind를 사용하는 경우 `prettier-plugin-tailwindcss`는 [Prettier 플러그인 배열의 마지막에 위치해야 합니다](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins).

    ```json title=".prettierrc"
    {
      "plugins": [
        "prettier-plugin-astro",
        "prettier-plugin-tailwindcss" // 반드시 마지막에 추가합니다.
      ],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```
    
4. 터미널에서 다음 명령을 실행하여 파일을 포맷팅합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

자세한 내용은 [Prettier 플러그인의 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)에서 지원되는 옵션, VS Code에서 Prettier를 설정하는 방법 등을 참조하세요.

### dprint

[dprint](https://dprint.dev/)는 JavaScript, TypeScript, CSS 등 다양한 언어를 지원하는 고도로 구성 가능한 코드 포맷터입니다. [markup_fmt 플러그인](https://github.com/g-plane/markup_fmt)을 사용하여 `.astro` 파일에 대한 지원을 추가할 수 있습니다.
